import { MaterialIcons } from '@expo/vector-icons';
import React from 'react';
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';

interface PhotoEditorProps {
  onEdit: () => void;
  onLayer: () => void;
  onFrame: () => void;
  onBorder: () => void;
  onCopy: () => void;
  onSetBackground: () => void;
  onDelete: () => void;
}

const photoActions = [
  { key: 'edit', label: '编辑', icon: 'edit' as const },
  { key: 'layer', label: '层级', icon: 'layers' as const },
  { key: 'frame', label: '相框', icon: 'crop-original' as const },
  { key: 'border', label: '边框', icon: 'border-outer' as const },
  { key: 'copy', label: '复制', icon: 'content-copy' as const },
  { key: 'background', label: '设为背景', icon: 'wallpaper' as const },
  { key: 'delete', label: '删除', icon: 'delete' as const },
];

export const PhotoEditor: React.FC<PhotoEditorProps> = ({
  onEdit,
  onLayer,
  onFrame,
  onBorder,
  onCopy,
  onSetBackground,
  onDelete,
}) => {
  const handleAction = (key: string) => {
    switch (key) {
      case 'edit':
        onEdit();
        break;
      case 'layer':
        onLayer();
        break;
      case 'frame':
        onFrame();
        break;
      case 'border':
        onBorder();
        break;
      case 'copy':
        onCopy();
        break;
      case 'background':
        onSetBackground();
        break;
      case 'delete':
        onDelete();
        break;
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>照片编辑</Text>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.scrollView}
        contentContainerStyle={styles.content}
      >
        {photoActions.map((action) => (
          <TouchableOpacity
            key={action.key}
            style={[
              styles.actionItem,
              action.key === 'delete' && styles.deleteAction,
            ]}
            onPress={() => handleAction(action.key)}
          >
            <View
              style={[
                styles.actionIcon,
                action.key === 'delete' && styles.deleteIcon,
              ]}
            >
              <MaterialIcons
                name={action.icon}
                size={20}
                color={action.key === 'delete' ? '#fff' : '#333'}
              />
            </View>
            <Text
              style={[
                styles.actionLabel,
                action.key === 'delete' && styles.deleteLabel,
              ]}
            >
              {action.label}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    paddingVertical: 20,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    textAlign: 'center',
    marginBottom: 15,
  },
  scrollView: {
    paddingHorizontal: 20,
  },
  content: {
    alignItems: 'center',
  },
  actionItem: {
    alignItems: 'center',
    marginRight: 20,
    minWidth: 60,
  },
  actionIcon: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: '#f5f5f5',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
  },
  deleteIcon: {
    backgroundColor: '#FF3B30',
  },
  actionLabel: {
    fontSize: 12,
    color: '#333',
    textAlign: 'center',
  },
  deleteLabel: {
    color: '#FF3B30',
  },
  deleteAction: {
    // 删除操作的特殊样式
  },
});
